<!DOCTYPE html>
<html lang="en">
<!--当前页面的设置与配置-->
    <head>
        <!--标题标签-->
        <title>高德地图导航定位</title>
        <!--解析字符编码-->
        <meta charset="UTF-8" />
        <!--媒体识别：自动响应移动端-->
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!--第二步：内联样式-->
        <style rel="stylesheet" type="text/css">
            /*去除正文body自带的内外间距：全屏*/
            body { margin:0; padding:0; }
            /*地图容器的大小*/
            #container { width:100%; height:100vh; }
        </style>
    </head>
    <!--页面正文-->
    <body>
        <!---
            前提:
                高德开放平台:https://lbs.amap.com
                注册账号，设置应用，配置应用信息，得到key和security
                我们的html是通过js接口实现地图的
                开发手册:https://lbs.amap.com/api/javascript-api-v2/summary
                ArkWeb方式:可以绕过鸿蒙系统，通过html整合高德地图，不受语言和版本的影响
                key:        afa57448fbd3921cb70cfa5388fd338a
                security:   ad8c666c68ed12966a75d7f36b53edc8
        --->

        <!--第一步:定义呈现地图的容器-->
        <div id="container"></div>

        <!--第三步:设置全局变量-->
        <script style="text/javascript">
            // 将“安全密钥”设置到全局中，后面很多地图操作，默认都会自动去调用的
            // 代码是固定的，不能修改
            // 这里在当前window对象中，挂载了一个配置
            window._AMapSecurityConfig ={
                securityJsCode:'ad8c666c68ed12966a75d7f36b53edc8'
            }

        </script>

        <!--第四步:加载官方离线脚本，附加申请的key-->
        <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=afa57448fbd3921cb70cfa5388fd338a">


        </script>

        <!--第五步:自定义脚本开发-->
        <script type="text/javascript">
            // 创建地图对象，初始化绑定('绑定的容器',{配置})
            var map = new AMap.Map('container',{zoom:25,center:[113.68548221,34.77207931]})

            // 当页面正式加载完毕后
            window.onload = function() {
                // 调用鸿蒙代理操作，获取且设置当前设备的经纬度
                window.swift.setCurrentLocation()
            }

            // 设置地图定位中心点(经度,纬度)
            function setLocation(lng , lat) {
                // 重新设置地图的中心点
                map.setZoomAndCenter(25,[lng , lat])

                // 创建一个标记点，加入到地图中
                map.add(
                    new AMap.Marker({
                    map,                        // 对应地图的对象
                    position:[lng , lat],       // 标记点
                    icon:'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
                }))

                // 为地图新增插件能力：搜索
                map.plugin(['AMap.PlaceSearch'],function() {
                    // 创建搜索功能的对象提供所有的设置
                    var MSearch = new AMap.PlaceSearch({
                        map,                    // 参照的地图对象
                        pageSize: 4,            // 每页多少条
                        pageIndex: 1,           // 当前第几页
                        extensions: 'base'      // 结果-只要基本信息
                    })


                    // 搜索之前，先为地图，设置监听
                    // 监听:当搜索功能完成时(采用的是js的事件机制)
                    AMap.Event.addListener(MSearch , 'complete' , (res) => {
                        // 调用鸿蒙应用方法，将搜索结果传回
                        window.swift.receiverNearPlace(JSON.stringify(res.poiList.pois))

                    })

                    // 执行搜索
                    MSearch.searchNearBy('龙卷风' , [lng , lat])

                })

            }

        </script>
    </body>
</html>